<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>css选择器</title>
  <style>
    /*标签选择器*/
    /* p{*/
    /*   color: green;*/
    /*   font-size: 30px;*/
    /* }*/

    /*ID选择器*/

    /*#p2{*/
    /*  font-family: 华文楷体;*/
    /*}*/

    /*群组选择器*/
    /*h1,h2{*/
    /*    color: pink;*/
    /*    font-size: 30px;*/
    /*    font-family: 华文楷体;*/
    /*}*/

    /*类选择器*/

    /*.hbase1{*/
    /*  color: pink;*/
    /*  font-size: 30px;*/
    /*}*/

    /*.hbase2{*/
    /*  font-family: 华文楷体;*/
    /*}*/

    /*#hb{*/
    /*  background-color: green;*/
    /*}*/

    子元素
    ul>li{
        color: pink;
    }

    #u1>p{
        color: red;
    }

    /*后代选择器*/
    /*#u1 p{*/
    /*  color: red;*/
    /*}*/

  </style>
</head>
<body>

<!--
    css选择器
    作用:  通过选择器语法,选中目标节点,实现样式的修改

    css选择器的分类:
     1. 标签选择器    标签名
     2. ID选择器    id要保证在页面中唯一
     3. 群组选择器
     4. class(类)选择器
     5. 子元素选择器
     6.后代选择器
-->

<p>
  CSS (Cascading Style Sheets，层叠样式表）,是一种用来为结构化文档（如 HTML 文档或 XML 应用）添加样式（字体、间距和颜色等）的计算机语言
</p>

<p id="p2">
  CSS (Cascading Style Sheets，层叠样式表）,是一种用来为结构化文档（如 HTML 文档或 XML 应用）添加样式（字体、间距和颜色等）的计算机语言
</p>
<!--华文楷体  30px  pink -->
<h1 class="hbase1 hbase2" id="hb">一级标题</h1>
<h2 class="hbase1">二级标题</h2>
<h3 class="hbase1">二级标题</h3>
<h4 class="hbase1">二级标题</h4>
<h5 class="hbase1">二级标题</h5>
<h6 class="hbase1 hbase2">二级标题</h6>


<ul id="u1">
  <p>p1</p>
  <li> 1
    <p>1-1</p>
  </li>
  <p>p2</p>
  <li>
    2
    <p>2-2</p>
  </li>
  <p>p3</p>
  <li>
    3
    <p>3-3</p>
  </li>
</ul>


<ul>
  <li>4</li>
  <li>5</li>
  <li>6</li>
</ul>








</body>
</html>